

Ext.require([
    'Ext.window.*',
    'Ext.tip.*',
    'Ext.grid.*',
    'Ext.data.*',

]);

Ext.define('Usuarios', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'int'
    },{
        name: 'first'
    }, {
        name: 'last'
    }, {
        name: 'email'
    }]
});

Ext.onReady(function(){

    Ext.QuickTips.init();

    // for this demo configure local and remote urls for demo purposes
    var url = {
        local:  '/listar',  // static data file
       // remote: 'grid-filter.php'
    };

    // configure whether filter query is encoded or not (initially)
    
    // configure whether filtering is performed locally or remotely (initially)
    var local = true;

    var store = Ext.create('Ext.data.JsonStore', {
        // store configs
        autoDestroy: true,
        model: 'Usuarios',
        proxy: {
            type: 'ajax',
            url: url.local,
            reader: {
                type: 'json',
                root: 'data',
                idProperty: 'id',

            }
        },
        remoteSort: false,
        sorters: [{
            property: 'id',
            direction: 'ASC'
        }],
        pageSize: 50
    });



    // use a factory method to reduce code while demonstrating
    // that the GridFilter plugin may be configured with or without
    // the filter types (the filters may be specified on the column model
    var createColumns = function (finish, start) {

        var columns = [{
            dataIndex: 'id',
            text: 'Id',
            // instead of specifying filter config just specify filterable=true
            // to use store's field's type property (if type property not
            // explicitly specified in store config it will be 'auto' which
            // GridFilters will assume to be 'StringFilter'
            width: 30
            //,filter: {type: 'numeric'}
        }, {
            dataIndex: 'first',
            text: 'first',
            id: 'first',
            flex: 1,

        }, {
            dataIndex: 'last',
            text: 'last',
            id: 'last',
            flex: 1,

        }, {
            dataIndex: 'email',
            text: 'E-mail',
            id: 'email',
          
            width: 180,

        }];

        return columns.slice(start || 0, finish);
    };
    
    var grid = Ext.create('Ext.grid.Panel', {
        border: false,
        store: store,
        columns: createColumns(4),

			
    });


    var win = Ext.create('Ext.Window', {
        title: 'Administración de Usuarios',

        height: 300,
        width: 600,
        layout: 'fit',
        items: grid
    });

    store.load();

    var win2,
        button = Ext.get('show-btn4');

    button.on('click', function(){

        if (!win2) {
            win2 = Ext.create('widget.window', {
        height: 400,
        width: 600,
        x: 500,
        y: 200,
        title: 'Alpha Manager ',
        closable: true,
        plain: true,
        layout: 'fit',
        items: [floater = Ext.create('Ext.Component', {
            xtype: 'component',
            floating: {
                shadow: false
            },
            height: 50,
            width: 50,
            x: 175,
            y: 75
        }),grid,{
            border: false
        }]
    });
        }
        button.dom.disabled = true;
        if (win2.isVisible()) {
            win2.hide(this, function() {
                button.dom.disabled = false;
            });
        } else {
            win2.show(this, function() {
                button.dom.disabled = false;
            });
        }
    }); 
    
    
    
    
    
    
});
